<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	    <title>后台管理系统登陆</title>
	    <link rel="shortcut icon" href="/static/img/favicon.ico">
		<link rel="stylesheet" href="/static/js/plugins/layui/layui.css">
		<link rel="stylesheet" href="/static/css/login.css">
	    <script type="text/javascript" src="/static/js/plugins/layui/layui/layui.js"></script>
		<style>
			body {
				background-color: #FFFFFF;
				background-image: url("${ctxPath}/assets/images/xn_login.png");
				background-repeat: no-repeat;
				background-size: contain;
				min-height: 100vh;
			}

			body:before {
				content: "";
				background-color: rgba(0, 0, 0, .2);
				position: fixed;
				top: 0;
				left: 0;
				right: 0;
				bottom: 0;
			}

			.login-wrapper {
				max-width: 420px;
				padding: 20px;
				margin: 0 auto;
				position: relative;
				box-sizing: border-box;
				z-index: 2;
			}

			.login-wrapper > .layui-form {
				padding: 25px 30px;
				background-color: #fff;
				box-shadow: 0 3px 6px -1px rgba(0, 0, 0, 0.19);
				box-sizing: border-box;
			}

			.login-wrapper > .layui-form > h2 {
				color: #333;
				font-size: 18px;
				text-align: center;
				margin-bottom: 25px;
			}

			.login-wrapper > .layui-form > .layui-form-item {
				margin-bottom: 25px;
				position: relative;
			}

			.login-wrapper > .layui-form > .layui-form-item:last-child {
				margin-bottom: 0;
			}

			.login-wrapper > .layui-form > .layui-form-item > .layui-input {
				height: 46px;
				line-height: 46px;
				border-radius: 2px !important;
			}

			.login-wrapper .layui-input-icon-group > .layui-input {
				padding-left: 46px;
			}

			.login-wrapper .layui-input-icon-group > .layui-icon {
				width: 46px;
				height: 46px;
				line-height: 46px;
				font-size: 20px;
				color: #909399;
				position: absolute;
				left: 0;
				top: 0;
				text-align: center;
			}

			.login-wrapper > .layui-form > .layui-form-item.login-captcha-group {
				padding-right: 135px;
			}

			.login-wrapper > .layui-form > .layui-form-item.login-captcha-group > .login-captcha {
				height: 46px;
				width: 120px;
				cursor: pointer;
				box-sizing: border-box;
				border: 1px solid #e6e6e6;
				border-radius: 2px !important;
				position: absolute;
				right: 0;
				top: 0;
			}

			.login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox {
				margin: 0 !important;
				padding-left: 25px;
			}

			.login-wrapper > .layui-form > .layui-form-item > .layui-form-checkbox > .layui-icon {
				width: 15px !important;
				height: 15px !important;
			}

			.login-wrapper > .layui-form .layui-btn-fluid {
				height: 48px;
				line-height: 48px;
				font-size: 16px;
				border-radius: 2px !important;
			}

			.login-wrapper > .layui-form > .layui-form-item.login-oauth-group > a > .layui-icon {
				font-size: 26px;
			}

			.login-copyright {
				color: #eee;
				padding-bottom: 20px;
				text-align: center;
				position: relative;
				z-index: 1;
			}

			@media screen and (min-height: 550px) {
				.login-wrapper {
					margin: -300px auto 0;
					position: absolute;
					top: 50%;
					left: 0;
					right: 0;
					width: 100%;
				}

				.login-copyright {
					position: absolute;
					bottom: 0;
					right: 0;
					left: 0;
				}
			}

			.layui-btn {
				background-color: #5FB878;
				border-color: #5FB878;
			}

			.layui-link {
				color: #5FB878 !important;
			}
			.snowy-title {
				height: 44px;
				line-height: 44px;
				text-align: center;
				margin-bottom: 40px
			}
			.snowy-title-img {
				height: 44px;
				vertical-align: top;
				border-style: none;
			}
			.snowy-title-span {
				font-size: 33px;
				color: rgba(0,0,0,.85);
				font-family: Avenir,Helvetica Neue,Arial,Helvetica,sans-serif;
				font-weight: 600;
				position: relative;
				top: 2px;
			}
		</style>
	</head>

	<body>
		<div class="login-wrapper layui-anim layui-anim-scale layui-hide">
			<div class="snowy-title">
				<img src="${ctxPath}/assets/images/logo.png" class="snowy-title-img">
				<span class="snowy-title-span">Ecovent快速开发平台</span>
			</div>
			<form class="layui-form">
				<h2>用户登录</h2>
				<div class="layui-form-item layui-input-icon-group">
					<i class="layui-icon layui-icon-username"></i>
					<input class="layui-input" name="account" placeholder="请输入登录账号" autocomplete="off"
						   lay-verType="tips" lay-verify="required" value="superAdmin" required/>
				</div>
				<div class="layui-form-item layui-input-icon-group">
					<i class="layui-icon layui-icon-password"></i>
					<input class="layui-input" name="password" placeholder="请输入登录密码" type="password"
						   lay-verType="tips" lay-verify="required" value="123456" required/>
				</div>
				<div class="layui-form-item layui-input-icon-group login-captcha-group">
					<i class="layui-icon layui-icon-auz"></i>
					<input class="layui-input" name="captcha" placeholder="请输入验证码" autocomplete="off"
						   lay-verType="tips" lay-verify="required" required/>
					<img class="login-captcha" alt=""/>
				</div>
				<div class="layui-form-item">
					<input type="checkbox" name="remember" title="记住密码" lay-skin="primary" checked>
					<a href="reg.html" class="layui-link pull-right">注册账号</a>
				</div>
				<div class="layui-form-item">
					<button class="layui-btn layui-btn-fluid" lay-filter="loginSubmit" lay-submit>登录</button>
				</div>
			</form>
		</div>
		<div class="login-copyright">copyright © 2020 xiaonuo.vip all rights reserved.</div>
	</body>
</html>

<script>
    layui.config({
        base : "/static/js/"
    }).use(['form','layer','jquery','common','carousel'], function () {
        var $ = layui.jquery,
                form = layui.form,
                common = layui.common,
                carousel = layui.carousel;

        /**背景图片轮播*/
        carousel.render({
             elem: '#login_carousel',
             width: '100%',
             height: '100%',
             interval:2000,
             arrow: 'none',
             anim: 'fade',
             indicator:'none'
        });

        /**重新生成验证码*/
        function reqCaptcha() {
            var url = "/captchaImage?type=${captchaType}&nocache=" + new Date().getTime()
            $('.code img').attr("src",url)
        }
        /**点击验证码重新生成*/
        $('.code img').on('click', function () {
            reqCaptcha();
        });

        /**监听登陆提交*/
        form.on('submit(login)', function (data) {
            //弹出loading
            var loginLoading = top.layer.msg('登陆中，请稍候', {icon: 16, time: false, shade: 0.8});
            //记录ajax请求返回值
            var ajaxReturnData;

            //登陆验证
            $.ajax({
                url: '/loginCheck',
                type: 'post',
                async: false,
                data: data.field,
                success: function (data) {
                    ajaxReturnData = data;
                }
            });
            //登陆成功
            if (ajaxReturnData.code == 0) {
                window.location.href="${ctx}/index";
                top.layer.close(loginLoading);
                return false;
            } else {
                top.layer.close(loginLoading);
                common.cmsLayErrorMsg(ajaxReturnData.msg);
                reqCaptcha();
                return false;
            }
        });
    });

</script>